<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementUI-pagination + 没有 responseVO</title>
    <link rel="stylesheet" href="/js/index.css">
</head>
<body>
<div id="app">
    <el-button type="danger" @click="getData">点击按钮</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="empName"
                label="姓名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="gender"
                label="性别"
                width="180">
        </el-table-column>

        <el-table-column
                prop="salary"
                label="工资"
                width="180">
        </el-table-column>

        <el-table-column
                prop="deptid"
                label="部门编号"
                width="180">
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 5, 7]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/index.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            tableData: [],      // 声明数据
            currentPage: 1,     // 起始页
            pagesize: 3,        // 每页显示的数据
            total:  0           // 总数默认为 0
        },
        methods: {
            // 获取数据
            getData() {
                vm.fetchData(vm.currentPage, vm.pagesize);
            },
            // 处理当前页
            handleSizeChange(v) {
                vm.fetchData(vm.currentPage, v)
            },
            // 处理当前页显示数据
            handleCurrentChange(v) {
                vm.fetchData(v, vm.pagesize)
            },
            // 获取数据
            fetchData(pageno, pagesize) {
                axios.get("/ajaxPage?pagenum=" + pageno + "&pagesize=" + pagesize)
                    .then(function (resp) {
                        vm.tableData = resp.data.list
                        vm.total = resp.data.total
                        vm.currentPage = resp.data.pageNum
                        vm.pagesize = resp.data.pageSize
                    }).catch(function (error) {
                    console.log(error)
                    alert(error)
                })
            }
        }
    })
</script>
</body>
</html>